<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>另一张TabBar大众脸的App | 双能卫</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="前面我们通过Navigation创建了一种可以切换界面外壳的App，其实拿起iPhone，我们发现除了这种类型还有另一种类型外壳的App.如下图：
 
我们发现这类App都是在最下面有一排Tab，每个Tab的Item表示一个分类的界面，通过点击这些Tab可以切换到对应的界面中。再回想下QQ/微信、淘宝/天猫、微博等每天都要用的App。
发现了什么？？？这些App都是这样的一个基本外壳。是不是把这个">
<meta property="og:type" content="article">
<meta property="og:title" content="另一张TabBar大众脸的App">
<meta property="og:url" content="http://www.libcz.com/blog/2015/05/17/iOS/后台程序员学习swift开发app/TabBar/创建另一张TabBar大众脸的app/index.html">
<meta property="og:site_name" content="双能卫">
<meta property="og:description" content="前面我们通过Navigation创建了一种可以切换界面外壳的App，其实拿起iPhone，我们发现除了这种类型还有另一种类型外壳的App.如下图：
 
我们发现这类App都是在最下面有一排Tab，每个Tab的Item表示一个分类的界面，通过点击这些Tab可以切换到对应的界面中。再回想下QQ/微信、淘宝/天猫、微博等每天都要用的App。
发现了什么？？？这些App都是这样的一个基本外壳。是不是把这个">
<meta property="og:image" content="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/alarm.png">
<meta property="og:image" content="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/appstore.png">
<meta property="og:image" content="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/tabbar_struct.png">
<meta property="og:image" content="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/tabbar_struct1.png">
<meta property="og:image" content="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/appdelegate.png">
<meta property="og:image" content="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/empty_tab.png">
<meta property="og:image" content="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/tabbar_run.png">
<meta property="og:image" content="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/more.png">
<meta property="og:image" content="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/more_cus.png">
<meta property="og:updated_time" content="2015-10-14T07:58:14.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="另一张TabBar大众脸的App">
<meta name="twitter:description" content="前面我们通过Navigation创建了一种可以切换界面外壳的App，其实拿起iPhone，我们发现除了这种类型还有另一种类型外壳的App.如下图：
 
我们发现这类App都是在最下面有一排Tab，每个Tab的Item表示一个分类的界面，通过点击这些Tab可以切换到对应的界面中。再回想下QQ/微信、淘宝/天猫、微博等每天都要用的App。
发现了什么？？？这些App都是这样的一个基本外壳。是不是把这个">
  
    <link rel="alternative" href="/blog/atom.xml" title="双能卫" type="application/atom+xml">
  
  
    <link rel="icon" href="http://images.libcz.com:8000/images/favicon.png">
  
  <link rel="stylesheet" href="/blog/css/style.css" type="text/css">
</head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			
			<img lazy-src="http://images.libcz.com:8000/images/white_bg_logo.png" class="js-avatar">
			
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">C Z</a></h1>
		</hgroup>

		
		<p class="header-subtitle">双能卫</p>
		

		
			<div class="switch-btn">
				<div class="icon">
					<div class="icon-ctn">
						<div class="icon-wrap icon-house" data-idx="0">
							<div class="birdhouse"></div>
							<div class="birdhouse_holes"></div>
						</div>
						<div class="icon-wrap icon-ribbon hide" data-idx="1">
							<div class="ribbon"></div>
						</div>
						
						
					</div>
					
				</div>
				<div class="tips-box hide">
					<div class="tips-arrow"></div>
					<ul class="tips-inner">
						<li>菜单</li>
						<li>标签</li>
						
						
					</ul>
				</div>
			</div>
		

		<div class="switch-area">
			<div class="switch-wrap">
				<section class="switch-part switch-part1">
					<nav class="header-menu">
						<ul>
						
							<li><a href="/blog">主页</a></li>
				        
							<li><a href="/blog/archives">所有文章</a></li>
				        
						</ul>
					</nav>
					<nav class="header-nav">
						<div class="social">
							
								<a class="github" target="_blank" href="http://github.com/cz-it" title="github">github</a>
					        
						</div>
					</nav>
				</section>
				
				
				<section class="switch-part switch-part2">
					<div class="widget tagcloud" id="js-tagcloud">
						<a href="/blog/tags/backend-vmstat/" style="font-size: 10px;">backend vmstat</a> <a href="/blog/tags/golang-cli/" style="font-size: 10px;">golang cli</a> <a href="/blog/tags/navigation/" style="font-size: 10px;">navigation</a> <a href="/blog/tags/swift/" style="font-size: 10px;">swift</a> <a href="/blog/tags/tabbar/" style="font-size: 10px;">tabbar</a>
					</div>
				</section>
				
				
				

				
			</div>
		</div>
	</header>				
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"></div>
  		<h1 class="header-author js-mobile-header hide">C Z</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img lazy-src="http://images.libcz.com:8000/images/white_bg_logo.png" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">C Z</h1>
			</hgroup>
			
			<p class="header-subtitle">双能卫</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/blog">主页</a></li>
		        
					<li><a href="/blog/archives">所有文章</a></li>
		        
		        <div class="clearfix"></div>
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="http://github.com/cz-it" title="github">github</a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div class="body-wrap"><article id="post-iOS/后台程序员学习swift开发app/TabBar/创建另一张TabBar大众脸的app" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/blog/2015/05/17/iOS/后台程序员学习swift开发app/TabBar/创建另一张TabBar大众脸的app/" class="article-date">
  	<time datetime="2015-05-16T16:00:00.000Z" itemprop="datePublished">2015-05-17</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      另一张TabBar大众脸的App
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/tabbar/">tabbar</a></li></ul>
	</div>

        
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/blog/categories/iOS/">iOS</a>
	</div>


        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>前面我们通过Navigation创建了一种可以切换界面外壳的App，其实拿起iPhone，我们发现除了这种类型还有另一种类型外壳的App.如下图：</p>
<p><img src="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/alarm.png" alt="alarm"> <img src="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/appstore.png" alt="appstore"></p>
<p>我们发现这类App都是在最下面有一排Tab，每个Tab的Item表示一个分类的界面，通过点击这些Tab可以切换到对应的界面中。再回想下QQ/微信、<br>淘宝/天猫、微博等每天都要用的App。</p>
<p>发现了什么？？？这些App都是这样的一个基本外壳。是不是把这个学会了，就是做牛逼哄哄的App了？</p>
<h2 id="一、TabBar是神马">一、TabBar是神马</h2><p>在Developer上的文章<a href="https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/ViewControllerCatalog/Chapters/TabBarControllers.html#//apple_ref/doc/uid/TP40011313-CH3-SW1" target="_blank" rel="external">《View Controller Catalog for iOS》</a> 中对TabBar的定义为：</p>
<blockquote>
<p> It is composed of views that the tab bar controller manages directly and views that are managed by content view controllers you provide. Each content view controller manages a distinct view hierarchy, and the tab bar controller coordinates the navigation between the view hierarchies.</p>
</blockquote>
<p>说白了就是一个管理其他用于承载实际内容的ViewController的容器ViewController,并且可以通过TabBar进行UI上的导航，也就是上面我们举例App的操作效果。</p>
<p>我们来看下其组成结构图：</p>
<p><img src="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/tabbar_struct.png" alt="tabbar_struct"></p>
<p>主要就是由下面的一个TabBar的list和承载显示内容的TabBarControllerView组成，每个TabBar还可以设置一个小的标题title和一个图标。<br>并且每个图标上面还可以显示一个红点（想想微信里面有新消息的时候）来表示一些提示信息。因此我们可以猜想，其实现就是用一个数组来保存每个<br>界面的ViewController，然后绘制一个可触发的Tab，当点击的时候切换到对应的ViewController中。 这样我们再看官方的分解图就容易理解了:</p>
<p><img src="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/tabbar_struct1.png" alt="tabbar_struct1"></p>
<h2 id="二、通过Tab切换界面">二、通过Tab切换界面</h2><p>这里我手写一个界面：</p>
<p><img src="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/appdelegate.png" alt="appdelegate"></p>
<p>这里创建一个 <code>UITabBarController</code>对象<code>rootVC</code>作为window的rootviewcontroller。如果就这样的话（打开这里的return 的注释），那么我们可以看到运行结果中就是在下面有个tab站位区间的界面。</p>
<p><img src="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/empty_tab.png" alt="empty_tab"></p>
<p>这时我们再创建几个容器ViewController，并为其创建一个一个带有背景颜色的View，从而方便鉴别。最后将这些容器ViewController赋给上面我们说的数组中：</p>
<pre><code>root<span class="title">VC.viewControllers = [tabVC01</span>,tab<span class="title">VC02</span>,tab<span class="title">VC03</span>,tab<span class="title">VC04</span>,tab<span class="title">VC05</span>,tab<span class="title">VC06</span>,]
</code></pre><p>可以看到我们的运行效果：</p>
<p><img src="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/tabbar_run.png" alt="tabbar_run"></p>
<h2 id="三、设置单个界面">三、设置单个界面</h2><p>在上面的代码中，我们除了设置了每个容器ViewController的view属性，从而展示界面效果，同时还为其设置了tabBarItem属性，该属性就是上面Tab占位区域中的元素。其主要由一个小图标的Icon和一个提示文字组成。对应类：UITabBarItem 。我们看下其构造函数：</p>
<pre><code><span class="function"><span class="title">init</span><span class="params">(title: String?, image: UIImage?, tag: Int)</span></span>
@<span class="function"><span class="title">availability</span><span class="params">(iOS, introduced=<span class="number">7.0</span>)</span></span>
<span class="function"><span class="title">init</span><span class="params">(title: String?, image: UIImage?, selectedImage: UIImage?)</span></span>
<span class="function"><span class="title">init</span><span class="params">(tabBarSystemItem systemItem: UITabBarSystemItem, tag: Int)</span></span>
</code></pre><p>构造函数里面传入一个title和一个UIImage对象对应上面说的图标Icon和提示文字。在iOS7.0之后还可以设置一个选中状态时的图标。上面的演示中，直接利用XCode的特性，用named属性初始化一个UIImage对象：</p>
<pre><code>let barAddItemImg = <span class="function"><span class="title">UIImage</span><span class="params">(named: <span class="string">"barbuttonicon_add"</span>)</span></span>
</code></pre><p>然后用这个UIImage对象和一个title构造一个UITabBarItem:</p>
<pre><code>tabVC01<span class="class">.tabBarItem</span> = <span class="function"><span class="title">UITabBarItem</span><span class="params">(title: <span class="string">"One"</span>, image: barAddItemImg, tag: <span class="number">1</span>)</span></span>
</code></pre><p>在构造完每个子界面的容器ViewController的UITabBarItem后，就可以将其装入UITabBarController中了：</p>
<pre><code>root<span class="title">VC.viewControllers = [tabVC01</span>,tab<span class="title">VC02</span>,tab<span class="title">VC03</span>,tab<span class="title">VC04</span>,tab<span class="title">VC05</span>,tab<span class="title">VC06</span>,]
</code></pre><p>诚如上面的推测，这里直接将要控制的ViewController构成一个数组放置在rootVC中。</p>
<p>这里，强势的iOS又有一个潜在的规则，Tab上的元素最多不能超过5个（含），多于5个的部分，会将第5个之后的元素全部替换成一个More的UITabBarItem并且其Icon也生成好了。当点击这个“More”的时候，会出现一个TableView的列表将剩余的容器ViewController依次列出来：</p>
<p><img src="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/more.png" alt="more"></p>
<p>这里iOS还自动生成了一个Edit的菜单，点击后用户可以修改TabBarItem的顺序，当然，这一切都是不用我们手动写代码，而是UITabBarController自身带有的功能。</p>
<p>这里我们看到“More”的Title和图标以及点进去后的“Edit”都是自动生成的，那是否可以对这些值进行自定义呢？UITabBarController抛出一个属性让我们可以访问到这个“More”ViewController，也就是：“moreNavigationController” 。从命名中我们就可以看出其是一个NavigationController，那就好办了，翻翻我们前面的一篇文章就知道怎么用这个ViewController。这里我们重新为其生成一个tabBarItem就可以替换在UITabBarController的Tab占位区域中的“More”的Tab了。通过获得moreNavigationController的栈顶的ViewController，遍可以设置其内容中的Title和“Edit”按钮，分别对应到<code>moreNavigationController.topViewController!.navigationItem.title</code>和<code>moreNavigationController.topViewController!.navigationItem.rightBarButtonItem?</code> ，看下代码：</p>
<pre><code><span class="function_or_atom">rootVC</span>.<span class="function_or_atom">moreNavigationController</span>.<span class="function_or_atom">tabBarItem</span> = <span class="variable">UITabBarItem</span>(<span class="function_or_atom">title</span>: <span class="string">"更多"</span>, <span class="function_or_atom">image</span>: <span class="function_or_atom">barAddItemImg</span>, <span class="function_or_atom">tag</span>: <span class="number">7</span>)

<span class="function_or_atom">rootVC</span>.<span class="function_or_atom">moreNavigationController</span>.<span class="function_or_atom">tabBarItem</span>.<span class="function_or_atom">title</span> = <span class="string">"更多"</span>
<span class="function_or_atom">rootVC</span>.<span class="function_or_atom">moreNavigationController</span>.<span class="function_or_atom">topViewController</span><span class="exclamation_mark">!</span>.<span class="function_or_atom">navigationItem</span>.<span class="function_or_atom">title</span> = <span class="string">"更多"</span>
<span class="function_or_atom">rootVC</span>.<span class="function_or_atom">moreNavigationController</span>.<span class="function_or_atom">topViewController</span><span class="exclamation_mark">!</span>.<span class="function_or_atom">navigationItem</span>.<span class="function_or_atom">rightBarButtonItem</span>?.<span class="function_or_atom">title</span> = <span class="string">"编辑"</span>
</code></pre><p>这里就实现了提示的自定义：</p>
<p><img src="http://images.libcz.com:8000/images/blog/iOS/后台程序员学习swift开发app/TabBar/more_cus.png" alt="more_cus"></p>
<h2 id="四、中间发生了神马">四、中间发生了神马</h2><p>在这些点击跳转的过程中，我们是否可以加一些控制呢？比如让某个tab不生效？答案是肯定的，这时UITabBarController抛出了一个delegate来作这样的事情：UITabBarControllerDelegate</p>
<p>其主要代理了如下几个过程：</p>
<pre><code><span class="variable">@availability</span>(iOS, introduced=<span class="number">3.0</span>)
optional func <span class="function">tabBarController</span>(<span class="attribute">tabBarController</span>: UITabBarController, shouldSelectViewController <span class="attribute">viewController</span>: UIViewController) -&gt; Bool
optional func <span class="function">tabBarController</span>(<span class="attribute">tabBarController</span>: UITabBarController, didSelectViewController <span class="attribute">viewController</span>: UIViewController)

<span class="variable">@availability</span>(iOS, introduced=<span class="number">3.0</span>)
optional func <span class="function">tabBarController</span>(<span class="attribute">tabBarController</span>: UITabBarController, willBeginCustomizingViewControllers <span class="attribute">viewControllers</span>: [AnyObject])
<span class="variable">@availability</span>(iOS, introduced=<span class="number">3.0</span>)
optional func <span class="function">tabBarController</span>(<span class="attribute">tabBarController</span>: UITabBarController, willEndCustomizingViewControllers <span class="attribute">viewControllers</span>: [AnyObject], <span class="attribute">changed</span>: Bool)
optional func <span class="function">tabBarController</span>(<span class="attribute">tabBarController</span>: UITabBarController, didEndCustomizingViewControllers <span class="attribute">viewControllers</span>: [AnyObject], <span class="attribute">changed</span>: Bool)

<span class="variable">@availability</span>(iOS, introduced=<span class="number">7.0</span>)
optional func <span class="function">tabBarControllerSupportedInterfaceOrientations</span>(<span class="attribute">tabBarController</span>: UITabBarController) -&gt; Int
<span class="variable">@availability</span>(iOS, introduced=<span class="number">7.0</span>)
optional func <span class="function">tabBarControllerPreferredInterfaceOrientationForPresentation</span>(<span class="attribute">tabBarController</span>: UITabBarController) -&gt; UIInterfaceOrientation

<span class="variable">@availability</span>(iOS, introduced=<span class="number">7.0</span>)
optional func <span class="function">tabBarController</span>(<span class="attribute">tabBarController</span>: UITabBarController, interactionControllerForAnimationController <span class="attribute">animationController</span>: UIViewControllerAnimatedTransitioning) -&gt; UIViewControllerInteractiveTransitioning?

<span class="variable">@availability</span>(iOS, introduced=<span class="number">7.0</span>)
optional func <span class="function">tabBarController</span>(<span class="attribute">tabBarController</span>: UITabBarController, animationControllerForTransitionFromViewController <span class="attribute">fromVC</span>: UIViewController, toViewController <span class="attribute">toVC</span>: UIViewController) -&gt; UIViewControllerAnimatedTransitioning?
</code></pre><p>每个回调的用途翻阅Developer的<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarControllerDelegate_Protocol/index.html#//apple_ref/occ/intfm/UITabBarControllerDelegate/tabBarController:didSelectViewController:" target="_blank" rel="external">手册</a>即可。最常用的就是前面两个。</p>
<ul>
<li><ul>
<li>tabBarController:shouldSelectViewController: // 是否设置选中</li>
</ul>
</li>
</ul>
<p>这个回调在点击某个tab的时候被调用，此时还没有进行切换，通过控制其返回false，可以使得不发生跳转，也就是点击无效的结果。</p>
<ul>
<li><ul>
<li>tabBarController:didSelectViewController:</li>
</ul>
</li>
</ul>
<p>当点击完tab完成切换后被调用。这个比较常用如，点击后做一些统计操作，或者一些初始化操作。</p>

      
    </div>
    
  </div>
  
    
<nav id="article-nav">
  
  
    <a href="/blog/2015/05/15/backend/vmstat_初体验/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">VMStat 初体验</div>
      <strong class="article-nav-caption">></strong>
    </a>
  
</nav>

  
</article>


<div class="share">
	<!-- JiaThis Button BEGIN -->
	<div class="jiathis_style">
		<span class="jiathis_txt">分享到：</span>
		<a class="jiathis_button_tsina"></a>
		<a class="jiathis_button_cqq"></a>
		<a class="jiathis_button_douban"></a>
		<a class="jiathis_button_weixin"></a>
		<a class="jiathis_button_tumblr"></a>
		<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
	</div>
	<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1405949716054953" charset="utf-8"></script>
	<!-- JiaThis Button END -->
</div>



<div class="duoshuo">
	<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="iOS/后台程序员学习swift开发app/TabBar/创建另一张TabBar大众脸的app" data-title="另一张TabBar大众脸的App" data-url="http://www.libcz.com/blog/blog/2015/05/17/iOS/后台程序员学习swift开发app/TabBar/创建另一张TabBar大众脸的app/"></div>
	<!-- 多说评论框 end -->
	<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
	<script type="text/javascript">
	var duoshuoQuery = {short_name:"true"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
	<!-- 多说公共JS代码 end -->
</div>




</div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
      <p><a rel="license" href="http://creativecommons.org/licenses/by-nd/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by-nd/4.0/88x31.png" /></a><br />本站采用<a rel="license" href="http://creativecommons.org/licenses/by-nd/4.0/">知识共享Attribution-NoDerivatives 4.0 国际许可协议</a>进行许可。</p>
    	<div class="footer-left">
    		&copy; 2015 C Z
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
  </div>
</footer>

    </div>
    
  <link rel="stylesheet" href="/blog/fancybox/jquery.fancybox.css" type="text/css">


<script>
	var yiliaConfig = {
		fancybox: true,
		mathjax: true,
		animate: true,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false
	}
</script>
<script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/blog/js/main.js" type="text/javascript"></script>






<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>


  </div>
</body>
</html>